<!DOCTYPE html>
<html lang="en">
<head>
	<!-- The jQuery library is a prerequisite for all jqSuite products -->
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<!-- We support more than 40 localizations -->
	<script type="text/ecmascript" src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
	<!-- This is the Javascript file of jqGrid -->
	<script type="text/ecmascript" src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>
	<!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css" />
	<script>
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap';
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<meta charset="utf-8" />
	<title>jqGrid Loading Data - Right-To-Left (RTL) support</title>
</head>
<body>
<div style="margin-left:20px">
	<table id="jqGrid"></table>
</div>
<script type="text/javascript">
	$(document).ready(function () {
		$("#jqGrid").jqGrid({
			url: 'json/loadFromJson.json',
			datatype: "json",
			colModel: [
				{ label: 'Category Name', name: 'CategoryName', width: 75 },
				{ label: 'Product Name', name: 'ProductName', width: 90 },
				{ label: 'Country', name: 'Country', width: 100 },
				{ label: 'Price',
					name: 'Price',
					width: 80,
					sorttype: 'number',
					formatter: 'number',
					align: 'right'
				},
				{ label: 'Quantity', name: 'Quantity', width: 80, sorttype: 'integer' }
			],
			loadonce: true,
			viewrecords: true,
			footerrow: true,
			userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer
			height: 200,
			rowNum: 150
		});
	});
</script>
</body>
</html>